<template>
   <div class="box">
      <!-- 项目名 -->
      <div class="logo">
         <img class="logo-image" src="../assets/header.png" alt="">

         <!-- <el-icon
            style="background-color: rgba(0, 0, 0, 0); color: #fff; font-size: 100px;position: absolute;top:110px;right: 300px;">
            <DArrowLeft />
         </el-icon>
    
         <el-icon
            style="background-color: rgba(0, 0, 0, 0); color: #fff; font-size: 100px;position: absolute;top:110px;left: 550px;">
            <DArrowRight />
         </el-icon> -->
      </div>
      <!-- 中心模块 -->
      <div class="mokuai">
         <div class="mokuai-left">
            <el-carousel :interval="5000" arrow="always" height="350px">
               <el-carousel-item v-for="item in dataList" :key="item">
                  <img style="width: 100%;height: 100%;" :src="item.img" alt="">
               </el-carousel-item>
            </el-carousel>
         </div>
         <div class="mokuai-middle">
            <div class="mokuai-middle-top">
               <div class="mokuai-middle-top-left">
                  <img style="width: 100%;height: 100%;"
                     src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
                  <div class="mokuai-middle-top-left-top">
                     <div style="color:#fff;font-size: 20px;margin-left: 10px;">老板重视的业绩管理系统</div>
                  </div>
               </div>
               <div class="mokuai-middle-top-right">
                  <img style="width: 100%;height: 100%;"
                     src="https://img0.baidu.com/it/u=2074248317,741471452&fm=253&fmt=auto&app=138&f=JPEG?w=231&h=500"
                     alt="">
                  <div style="position: absolute;bottom: 40px;right: 10px;font-size: 26px;color: #fff;width: 60px;">热门推荐
                  </div>
               </div>
            </div>
            <div class="mokuai-middle-buttom">
               <el-icon>
                  <Setting />
               </el-icon>【公司动态】融合优势,合力前行——利唐i人事与伯乐会达成战略合作
            </div>

         </div>
         <div class="mokuai-right">
            <div class="mokuai-right-top">
               <div>
                  <img style="width: 100px;height: 100px;margin-top: -15px;" src="../assets/logo3.png" alt="">
               </div>
            </div>
            <div class="mokuai-right-buttom" style="color: #FB9500;display: flex;font-size: 20px;font-family: 'Courier New', Courier, monospace;font-weight: bolder;
               align-items: center;">
               <div>
                  才汇智云人力资源管理平台
               </div>
            </div>
            <div class="mokuai-right-middle">
               <img style="width: 100%;height: 100%;"
                  src="https://img0.baidu.com/it/u=2074248317,741471452&fm=253&fmt=auto&app=138&f=JPEG?w=231&h=500" alt="">
               <div style="position: absolute;top: 20px;left: 10px;font-size: 26px;color: #fff;width: 60px;">本地精选
               </div>
            </div>


         </div>
      </div>
      <!-- 地点 -->
      <div class="address">
         <el-row :gutter="10">
            <el-col :span="8">
               <el-card shadow="always" style="height: 290px; display: flex;justify-content: center;">
                  <div id="main1" style="width: 400px;height: 300px;"></div>
               </el-card>
            </el-col>
            <el-col :span="8">
               <el-card shadow="always" style="height: 290px; display: flex;justify-content: center;">
                  <div id="main" style="width: 400px;height: 300px;"></div>
               </el-card>
            </el-col> <el-col :span="8">
               <el-card shadow="always" style="height: 290px; display: flex;justify-content: center;">
                  <div id="main3" style="width: 400px;height: 300px;"></div>
               </el-card>
            </el-col>

         </el-row>
      </div>
      <!-- 尾部 -->
      <!-- <div class="butoom">未完待续...</div> -->
   </div>
</template>
<script setup>


import {
   Setting
} from '@element-plus/icons-vue';
</script>

<script>
import * as echarts from 'echarts';
export default {
   data() {
      return {
         dataList: [],
         titleList: []
      }
   },
   mounted() {
      this.byEvents();
      this.echarts1();
      this.echarts2();
      this.echarts3();
   },
   methods: {
      byEvents() {
         this.dataList = [{
            img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            // title: '标题'
         }, {
            img: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
            // title: '标题'
         },
         {
            img: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
            // title: '标题'
         }
         ],
            this.titleList = [{
               // img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
               title: '老板重视的业绩管理系统'
            }, {
               // img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
               title: '赋能HR的人效分析系统'
            }, {
               // img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
               title: '全员协同的极致体验系统'
            }]
      },
      echarts1() {
         var myChart1 = echarts.init(document.getElementById('main1'));
         myChart1.setOption({
            title: {
               text: '员工年龄分布'
            },
            tooltip: {},
            xAxis: {
               data: ['18-20', '20-30', '30-40', '40-50', '50-60', '60-70']
            },
            yAxis: {},
            series: [
               {
                  name: '年龄',
                  type: 'bar',
                  data: [212, 300, 1352, 829, 649, 391]
               }
            ]
         });
      },
      echarts2() {
         var myChart = echarts.init(document.getElementById('main'));
         myChart.setOption({
            title: {
               text: '员工绩效评估分布',
               left: 'center'
            },
            xAxis: {
               type: 'category',
               boundaryGap: false,
               data: ['不及格', '及格', '中等', '良好', '优秀']
            },
            yAxis: {
               type: 'value'
            },
            series: [{
               data: [189, 498, 892, 976, 1284],
               type: 'line',
               areaStyle: {}
            }]
         });
      },
      echarts3() {
         var myChart3 = echarts.init(document.getElementById('main3'));
         myChart3.setOption({
            title: {
               text: '员工学历分布',
               left: 'center'
            },
            tooltip: {
               trigger: 'item',
               formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
               orient: 'vertical',
               left: 'left',
               data: ['高中以下', '大专', '本科', '硕士', '博士']
            },
            series: [
               {
                  name: '访问来源',
                  type: 'pie',
                  radius: '55%',
                  center: ['50%', '60%'],
                  data: [
                     { value: 335, name: '高中以下' },
                     { value: 310, name: '大专' },
                     { value: 234, name: '本科' },
                     { value: 135, name: '硕士' },
                     { value: 1548, name: '博士' }
                  ],
                  emphasis: {
                     itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
                  }
               }
            ]
         });
      }

   }
}

</script>
<style scoped>
* {
   margin: 0;
   padding: 0;
}


.box {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: black;
}


.logo {
   width: 95%;
   height: 200px;
   background-color: #FB9500;
}

.mokuai {
   margin-top: 10px;
   width: 95%;
   height: 350px;
   display: flex;
}

.address {
   width: 95%;
   height: 300px;
   background-color: #fff;
   margin-top: 10px;
}

.butoom {
   width: 95%;
   height: 80px;
   background-color: #FB9500;
}

.logo-image {
   height: 100%;
}

.mokuai-left {
   width: 680px;
   height: 300px;
   /* background-color: red; */
   margin-right: 10px;
}

.el-carousel__item h3 {
   color: #475669;
   opacity: 0.75;
   line-height: 300px;
   margin: 0;
   text-align: center;
}

.el-carousel__item:nth-child(2n) {
   background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
   background-color: #d3dce6;
}

.mokuai-middle {
   width: 680px;
   height: 350px;
}

.mokuai-middle-top {
   width: 680px;
   height: 290px;
   display: flex;
}

.mokuai-middle-top-left {
   width: 490px;
   height: 290px;
   position: relative;

}

.mokuai-middle-top-left-top {
   width: 100%;
   height: 50px;
   background-color: rgba(0, 0, 0, .3);
   position: absolute;
   bottom: 0;
   display: flex;
   align-items: center;

}

.mokuai-middle-top-right {
   position: relative;
   width: 180px;
   height: 290px;
   margin-left: 10px;
}

.mokuai-middle-buttom {
   margin-top: 10px;
   width: 100%;
   height: 50px;
   background-color: #FB9500;
   display: flex;
   align-items: center;
   color: #fff;
   font-size: 18px;
   justify-content: center;
}

.mokuai-right {
   width: 160px;
   height: 350px;
   background-color: #fff;
   margin-left: 10px;
}

.mokuai-right-top {
   width: 100%;
   height: 65px;
}

.mokuai-right-middle {
   width: 100%;
   margin-top: 10px;
   height: 200px;
   position: relative;
}

.mokuai-right-buttom {
   margin-top: 10px;
   width: 100%;
   height: 65px;
   background-color: #fff;
}
</style>